<template>
  <div class="container">
    <div class="login-container ">  
      <form @submit.prevent="handleLogin">  
        <h2 style="  text-align: center;  margin-bottom: 20px;">{{ $t('home.trademark') }}</h2>  
        <div class="form-group">  
          <label for="username">{{ $t('home.username') }}</label>  
          <input class="form-control" type="text" v-focus v-model="loginForm.username" required>  
        </div>  
        <div class="form-group">  
          <label for="password">{{ $t('home.password') }}</label>  
          <input class="form-control" type="password" v-zhang v-model="loginForm.password" required>  
        </div>  
        <button type="submit" class="login-button">{{ $t('home.login_text') }}</button>
        
      </form>  
      <button  class="login-button" @click="setLocale('en')" >en</button>
        <button  class="login-button" @click="setLocale('cn')">cn</button>
        <span style="font-family: 'DINAlternate', sans-serif;"> {{ $hello('世界') }}</span>
       
        <AppFooter></AppFooter>
        {{foo}}
        <button  @click="DefaultTheme('default')">默认主题</button>
        <button @click="DefaultTheme('light')">黑色主题</button>
         <svg-icon icon-class="loading" width="30px" height="30px" color="red"/>
    </div>  
  </div>  
</template>  
  
<script lang="ts" setup>  
import login from '~/hooks/login';

const foo = useFoo()
let {loginForm,handleLogin}=login();
const { locale, setLocale } = useI18n();

const config = useRuntimeConfig()
const DefaultTheme=(ping:string)=>{
  if(ping==="default"){
    window.document.documentElement.setAttribute('data-theme','dark');
  }else{
    window.document.documentElement.setAttribute('data-theme', 'light');
  }
  
}
// 或者，你也可以在这里使用它
const { $hello } = useNuxtApp()




</script>  
  
<style scoped lang="scss"> 
@import url("~/styles/login.scss");
</style>